import React, { useState } from 'react'
import { Steps, Empty } from 'antd-mobile'
import { QuestionCircleOutline } from 'antd-mobile-icons'
import { useSelector } from 'react-redux'
const { Step } = Steps

export default function Track() {
    const orderIndex = useSelector(store => store.cart.orderTrack || "-1")
    const [currentStep, setCurrentStep] = useState(orderIndex);

    const steps = [
        { title: '订单完成', status: currentStep === '0' ? 'process' : 'wait' },
        { title: '已支付', status: currentStep === '1' ? 'process' : 'wait' },
        { title: '已使用', status: currentStep === "2" ? 'process' : 'wait' },
        { title: '订单提交成功', status: currentStep === '3' ? 'process' : 'wait' }
    ];
    return (
        <div>
            {
                orderIndex === '' ? <Empty description='暂无订单！！请去下单亲' /> : <Steps current={currentStep} direction="vertical">
                    {steps.map((step, index) => (
                        <Step
                            key={index}
                            title={<span>{step.title}</span>}
                            status={step.status}
                        />
                    ))}
                </Steps>
            }


        </div>
    )
}
